<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    body{
				margin: 0;
			}
			.flower{
				width: 960px;
				margin: 100px auto 0px;
			}
			.flower::after{
				content: "";
				display: block;
				clear: both;
			}
			.flower .item{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
				float: left;
				margin: 0px 10px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
			}
			.item img{
				transition: all ease .5s;
			}
			.item .item-mask{
				width: 300px;
				height: 300px;
				position: absolute;
				left: -5px;
				top: -5px;
				transition: all ease .5s;
			}
			.item:hover .item-mask{
				transform: scale(0.8);
				background-color: rgba(0,0,0,0.5);
				border: 5px solid #fff;
				box-shadow: 0px 0px 0px 40px rgba(255,255,255,0.5);
			}
			.item .item-title{
				position: absolute;
				top: 80px;
				left: 40px;
				right: 40px;
				font-size: 18px;
				color: #fff;
				transform: scale(1.2);
				transition: all ease .5s;
				opacity: 0;
			}
			.item .item-info{
				position: absolute;
				top: 110px;
				left: 40px;
				right: 40px;
				color: #fff;
				font-size: 14px;
				transform: scale(1.2);
				transition: all ease .5s;
				opacity: 0;
			}
			.item:hover .item-title{
				transform: scale(1);
				opacity: 1;
			}
			.item:hover .item-info{
				transform: scale(1);
				opacity: 1;
			}
			.item:hover img{
				transform: scale(1.2);
			}
		</style>
	</head>
	<body>
		<div class="flower">
			<div class="item">
				<img src="img/post-25.jpg" width="300" height="300" />
				<div class="item-mask"></div>
				<div class="item-title">金刚狼</div>
				<div class="item-info">猫，猫科猫属动物，是全世界家庭中较为广泛的宠物。猫，头圆，颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩，具有夜行性，行动敏捷，善跳跃。</div>
			</div>
			<div class="item">
				<img src="img/post-25.jpg" width="300" height="300" />
				<div class="item-mask"></div>
				<div class="item-title">金刚狼</div>
				<div class="item-info">猫，猫科猫属动物，是全世界家庭中较为广泛的宠物。猫，头圆，颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩，具有夜行性，行动敏捷，善跳跃。</div>
			</div>
			<div class="item">
				<img src="img/post-25.jpg" width="300" height="300" />
				<div class="item-mask"></div>
				<div class="item-title">金刚狼</div>
				<div class="item-info">猫，猫科猫属动物，是全世界家庭中较为广泛的宠物。猫，头圆，颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩，具有夜行性，行动敏捷，善跳跃。</div>
			</div>
		</div>
	</body>
</html>
